<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<div th:fragment="ProfileHeader" id="ProfileHeader" class="ProfileHeader" data-za-detail-view-path-module="Unknown"
     data-za-extra-module="{&quot;card&quot;:{&quot;content&quot;:{&quot;type&quot;:&quot;User&quot;,&quot;token&quot;:&quot;xiong-shu-53-89&quot;}}}">
    <div class="Card">
        <div class="ProfileHeader-userCover">
            <div class="UserCoverEditor">
                <div><label class="UploadPicture-wrapper">
                    <input type="file" id="file_input" accept="image/*" class="UploadPicture-input">

                    <div class="UserCoverGuide">
                        <div class="UserCoverGuide-inner">
                            <div class="UserCoverGuide-buttonContainer">
                                <button type="button"
                                        class="Button DynamicColorButton">
                                    <svg viewBox="0 0 20 16"
                                         class="Icon Icon--camera Icon--left" width="14" height="16"
                                         aria-hidden="true" style="height: 16px; width: 14px;">
                                        <title></title>
                                        <g>
                                            <path
                                                    d="M18.094 2H15s-1-2-2-2H7C6 0 5 2 5 2H2C0 2 0 3.967 0 3.967V14c0 2 2.036 2 2.036 2H17c3 0 3-1.983 3-1.983V4c0-2-1.906-2-1.906-2zM10 12c-1.933 0-3.5-1.567-3.5-3.5S8.067 5 10 5s3.5 1.567 3.5 3.5S11.933 12 10 12zm0 1.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm7.5-8c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1z"
                                                    fill-rule="evenodd"></path>
                                        </g>
                                    </svg>
                                    上传封面图片
                                </button>
                            </div>
                            <div class="UserCoverGuide-dialog">
                                <h4 class="UserCoverGuide-dialogHead">上传一张图片，展示在这里</h4>
                                <div class="UserCoverGuide-dialogContent">
                                    <p class="UserCoverGuide-dialogDescription">
                                        你可以使用自己的摄影作品、你喜欢的照片，或是任何能展现你特质的图片。</p><a
                                        href="https://www.zhihu.com/question/21757507" target="_blank"
                                        rel="noopener noreferrer">哪里能找到可免费使用的优质图片？</a>
                                </div>
                            </div>
                        </div>
                        <ul class="UserCoverGuide-items">
                            <li class="UserCoverGuide-item"
                                style="background-image: url('https://static.zhihu.com/heifetz/assets/guide-cover-1.4423ce0f.jpg');">
                            </li>
                            <li class="UserCoverGuide-item"
                                style="background-image: url('https://static.zhihu.com/heifetz/assets/guide-cover-2.4c501852.jpg');">
                            </li>
                            <li class="UserCoverGuide-item"
                                style="background-image: url('https://static.zhihu.com/heifetz/assets/guide-cover-3.d59ac68c.jpg');">
                            </li>
                            <li class="UserCoverGuide-item"
                                style="background-image: url('https://static.zhihu.com/heifetz/assets/guide-cover-4.5518ba1a.jpg');">
                            </li>
                            <li class="UserCoverGuide-item"
                                style="background-image: url('https://static.zhihu.com/heifetz/assets/guide-cover-5.2b2adaeb.jpg');">
                            </li>
                        </ul>
                    </div>
                </label>
                    <div class="UserCover UserCover--colorBlock"></div>
                </div>
            </div>
        </div>
        <div class="ProfileHeader-wrapper">
            <div class="ProfileHeader-main">
                <div class="UserAvatarEditor ProfileHeader-avatar" style="top: -74px;">
                    <div class="UserAvatar"><img class="Avatar Avatar--large UserAvatar-inner" width="160"
                                                 height="160"
                                                 th:each="cookie :${#httpServletRequest.getCookies()}"
                                                 th:if="${cookie.getName().equals('zhihuid')}"


                                                 th:src="@{'/img/upfile/'+${cookie.getValue()}+'dp.jpg'}"
                    >
                        <!--<img class="Avatar Avatar&#45;&#45;large UserAvatar-inner" width="160"-->
                        <!--height="160" th:src="'/images/bell.png'">-->
                    </div>
                    <label
                            class="UploadPicture-wrapper"><input type="file" accept="image/png,image/jpeg"
                                                                 class="UploadPicture-input">
                        <div class="Mask UserAvatarEditor-mask Mask-hidden">
                            <div class="Mask-mask Mask-mask--black UserAvatarEditor-maskInner"></div>
                            <div class="Mask-content">
                                <svg class="Zi Zi--Camera UserAvatarEditor-cameraIcon"
                                     fill="currentColor" viewBox="0 0 24 24" width="36" height="36">
                                    <path
                                            d="M20.094 6S22 6 22 8v10.017S22 20 19 20H4.036S2 20 2 18V7.967S2 6 4 6h3s1-2 2-2h6c1 0 2 2 2 2h3.094zM12 16a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0 1.5a5 5 0 1 0-.001-10.001A5 5 0 0 0 12 17.5zm7.5-8a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
                                            fill-rule="evenodd"></path>
                                </svg>
                                <div class="UserAvatarEditor-maskInnerText">修改我的头像</div>
                            </div>
                        </div>
                    </label>
                </div>
                <div class="ProfileHeader-content">
                    <div class="ProfileHeader-contentHead">
                        <h1 class="ProfileHeader-title"><span class="ProfileHeader-name"
                                                              th:each="cookie :${#httpServletRequest.getCookies()}"
                                                              th:if="${cookie.getName().equals('zhihu')}"
                                                              th:text="${cookie.getValue()}">

                        </span><span
                                class="ztext ProfileHeader-headline"></span></h1>
                    </div>
                    <div class="ProfileHeader-contentBody"
                         style="overflow: hidden; transition: height 300ms ease-out 0s; height: 0px;">
                        <div>
                            <div class="ProfileHeader-info"></div>
                        </div>
                    </div>
                    <div class="ProfileHeader-contentFooter">
                        <button type="button"
                                class="Button ProfileHeader-expandButton Button--plain">
                            <svg viewBox="0 0 10 6"
                                 class="Icon ProfileHeader-arrowIcon Icon--arrow" width="10" height="16"
                                 aria-hidden="true" style="height: 16px; width: 10px;">
                                <title></title>
                                <g>
                                    <path
                                            d="M8.716.217L5.002 4 1.285.218C.99-.072.514-.072.22.218c-.294.29-.294.76 0 1.052l4.25 4.512c.292.29.77.29 1.063 0L9.78 1.27c.293-.29.293-.76 0-1.052-.295-.29-.77-.29-1.063 0z">
                                    </path>
                                </g>
                            </svg>
                            查看详细资料
                        </button>
                        <div class="ProfileButtonGroup ProfileHeader-buttons">
                            <button type="button"
                                    class="Button Button--blue">编辑个人资料
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
